<template>
	<!-- 顶部刷新 -->
	<refresh class="_focus-refresh-shell" :display="refresh.list[refresh.index].display"
	@pullingdown="pullingdownCall" @refresh="refreshCall">
		<!-- 动画组件 -->
		<loading-indicator class="_focus-refresh-icon"></loading-indicator>
		<!-- 显示文字 -->
		<text class="_focus-refresh-text">{{refresh.list[refresh.index].txt}}</text>
	</refresh>
</template>


<script>
	/**
	 * 顶部下拉刷新
	 * @description 仅nvue生效，为容器提供下拉刷新功能
	 * @tutorial
	 * @property {String} tag 组件自定义标识，默认：focus-refresh
	 * @event {Function} onrefresh 触发下拉刷新后的回调
	 */
	
	export default {
		name: "focus-refresh",
		// 组件需要获取数据
		props: {
			"tag": { type: String, default: 'focus-refresh' },
		},
		
		// 页面数据
		data() {
			return {
				// 定时器对象
				obj_timeout: null,
				// 顶部刷新
				refresh: {
					index: 0,
					list: [
						{ txt: '下拉刷新', display: 'hide' },
						{ txt: '正在刷新...', display: 'show' },
						{ txt: '刷新完成', display: 'hide' },
					],
				},
			}
		},
		
		// 组件销毁
		beforeDestroy() {
			// 如果已经存在定时器，那么先销毁
			if (this.obj_timeout) { clearTimeout(this.obj_timeout); }
		},
		
		// 页面事件
		methods: {
			
			// ======================================== 父级调用
			// 停止刷新
			stop() {
				// 如果已经存在定时器，那么先销毁
				if (this.obj_timeout) { clearTimeout(this.obj_timeout); }
				// 延时执行
				this.obj_timeout = setTimeout(()=>{
					// 状态变为："结束刷新"
					this.refresh.index = 2;
				}, 1000);
			},
			
			// ======================================== 元素事件
			// 下拉行为触发 回调
			pullingdownCall() {
				// 状态变为："即将loading"
				this.refresh.index = 0;
			},
			
			// 正在刷新触发 回调
			refreshCall() {
				// 状态变为："loading中"
				this.refresh.index = 1;
				// 事件回调
				this.$emit('onrefresh', { "tag": this.tag });
			},
			
		},
	
	}
</script>


<style lang="scss">
	/* 组件外层 */
	._focus-refresh-shell{
		width: 750rpx; height: 140rpx;
		padding-top: 30rpx;
		/* #ifndef APP-NVUE */
		display: flex; box-sizing: border-box;
		/* #endif */
		flex-direction: column; justify-content: flex-start; align-items: center;
	}
	/* 动画图标 */
	._focus-refresh-icon{
		width: 44rpx; height: 44rpx;
		margin-bottom: 16rpx;
		color: $focus-color-remark;
	}
	/* 显示文字 */
	._focus-refresh-text{
		font-size: 24rpx; line-height: 30rpx;
		color: $focus-color-remark;
	}
</style>